<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>站点导航(纯CSS3实现下拉框)</title>
    <link rel="stylesheet" href="css/one.css">
</head>
<body>
<!-- 站点导航开始 -->
<div class="nav-site">
    <div class="container">
        <ul class="fl">
            <li class="fl"><a href="javascript:"  class="nav-site-login">亲，请登录</a></li>
            <li class="fl"><a href="javascript:"  class="nav-site-signup link">免费注册</a></li>
            <li class="fl"><a href="javascript:"  class="nav-site-mobile link">手机逛慕淘</a></li>
        </ul>
        <ul class="fr">
            <li class="dropdown fl">
                <a href="#" target="_blank" class="dropdown-toggle link ">我的慕淘<i class="dropdown-arrow"></i></a>
                <ul class="dropdown-layer dropdown-left">
                    <li><a href="#" target="_blank" class="dropdown-item">已买到的宝贝</a></li>
                    <li><a href="#" target="_blank" class="dropdown-item">我的足迹</a></li>
                </ul>
            </li>
            <li class="dropdown fl">
                <a href="#" target="_blank" class="dropdown-toggle link">收藏夹<i class="dropdown-arrow"></i></a>
                <ul class="dropdown-layer dropdown-left">
                    <li><a href="#" target="_blank" class="dropdown-item">收藏的宝贝</a></li>
                    <li><a href="#" target="_blank" class="dropdown-item">收藏的店铺</a></li>
                </ul>
            </li>
            <li class="fl">
                <a href="#" target="_blank" class="nav-site-category link">商品分类</a>
            </li>
            <li class="dropdown fl">
                <a href="#" target="_blank" class="dropdown-toggle link">卖家中心<i class="dropdown-arrow"></i></a>
                <ul class="dropdown-layer dropdown-left">
                    <li class="dropdown-loading"></li>
                    <li><a href="#" target="_blank" class="dropdown-item">免费开店</a></li>
                    <li><a href="#" target="_blank" class="dropdown-item">已卖出的宝贝</a></li>
                    <li><a href="#" target="_blank" class="dropdown-item">出售中的宝贝</a></li>
                    <li><a href="#" target="_blank" class="dropdown-item">卖家服务市场</a></li>
                    <li><a href="#" target="_blank" class="dropdown-item">卖家培训中心</a></li>
                    <li><a href="#" target="_blank" class="dropdown-item">体验中心</a></li>
                </ul>
            </li>
            <li class="nav-site-service dropdown fl">
                <a href="#" target="_blank" class="dropdown-toggle link">联系客服<i class="dropdown-arrow"></i></a>
                <ul class="dropdown-layer dropdown-right">
                    <li><a href="#" target="_blank" class="dropdown-item">消费者客服</a></li>
                    <li><a href="#" target="_blank" class="dropdown-item">卖家客服</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>
<h1 style="text-align: center;font-size: large;color: red;margin-top: 100px">使用css3 :hover 显示下拉层</h1>
<!-- 站点导航结束 -->
</body>
</html>